<template>
  <n-config-provider
    :locale="zhCN"
    :date-locale="dateZhCN"
    :theme="darkTheme"
    :theme-overrides="overridesTheme"
    :hljs="hljs"
  >
    <provide>
      <Suspense>
        <router-view />
      </Suspense>
    </provide>
  </n-config-provider>
</template>

<script setup lang="ts">
  import { zhCN, dateZhCN } from 'naive-ui'
  import hljs from 'highlight.js/lib/core'
  import javascript from 'highlight.js/lib/languages/javascript'
  import java from 'highlight.js/lib/languages/java'
  import json from 'highlight.js/lib/languages/json'
  import {
    useDarkThemeHook,
    useThemeOverridesHook
  } from '@/utils/theme/setTheme'
  import themeConfig from '@/config/theme.config'
  // import { useUser } from '@/store/modules/user'
  // 暗黑主题
  const darkTheme = useDarkThemeHook()
  hljs.registerLanguage('javascript', javascript)
  hljs.registerLanguage('java', java)
  hljs.registerLanguage('json', json)
  // 主题配置
  const overridesTheme = useThemeOverridesHook()
  // 全局置灰功能
  if (themeConfig.globalGrey) {
    const htmlEle = document.querySelector('#htmlRoot')
    if (htmlEle) htmlEle.className += ' gray'
  }
  // 将css变量挂载在html上
  watch(
    () => overridesTheme.value.common,
    (themes) => {
      const globalStyles = {
        '--primary-color': themes?.primaryColor,
        '--primary-colorHsl': themes?.primaryColorHover,
        '--text-color': themes?.textColor,
        '--icon-color': themes?.iconColor,
        '--primary-color-alpha': themes?.primaryColorAlpha
      }
      const themeStyleValue = Object.keys(globalStyles)
        .map((key) => `${key}:${globalStyles[key]}`)
        .join(';')
      const htmlEle = document.querySelector('html')

      if (htmlEle) htmlEle.setAttribute('style', themeStyleValue)
    },
    {
      immediate: true
    }
  )

  // 添加全局水印
  // const user = useUser()
  // const { userInfo } = storeToRefs(user)
  // const { setWatermark, clearWatermark } = useWatermark('body')
  // watch(
  //   [() => userInfo.value.userName, () => userInfo.value.realName],
  //   ([userName, realName]) => {
  //     clearWatermark()
  //     setWatermark(`${userName || ''} ${realName || ''}`)
  //   }
  // )
  // onUnmounted(() => {
  //   clearWatermark()
  // })
</script>

<style lang="less"></style>
